<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css">
    <script src="../layuiadmin/layui/layui.js"></script>
    <title>Document</title>
</head>

<body>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="#" id="active">最新活动</a></li>
        <li class="layui-nav-item"><a href="#" id="price">产品</a></li>
        <li class="layui-nav-item"><a href="#" id="maxdata">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a href="#">移动模块</a></dd>
                <dd><a href="#">后台模版</a></dd>
                <dd><a href="#">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <div id="page_two" style="display: none;">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">layout demo</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="">nav 1</a></li>
                    <li class="layui-nav-item"><a href="">nav 2</a></li>
                    <li class="layui-nav-item"><a href="">nav 3</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">nav groups</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">menu 11</a></dd>
                            <dd><a href="">menu 22</a></dd>
                            <dd><a href="">menu 33</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                                class="layui-nav-img">
                            tester
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">set 1</a></dd>
                            <dd><a href="">set 2</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">Sign out</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-nav-itemed">
                            <a class="" href="javascript:;">menu group 1</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">menu item 1-1</a></dd>
                                <dd><a href="javascript:;">menu item 1-2</a></dd>
                                <dd><a href="javascript:;">menu item 1-3</a></dd>
                                <dd><a href="">the links</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">menu group 2</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">list 2-1</a></dd>
                                <dd><a href="javascript:;">list 2-2</a></dd>
                                <dd><a href="">超链接</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="javascript:;">menu item 123</a></li>
                        <li class="layui-nav-item"><a href="">the links</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">内容主体区域</div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'form', 'jquery', 'layer', 'table'], function () {
            var element = layui.element
                , form = layui.form
                , $ = layui.jquery
                , layer = layui.layer
                , table = layui.table
            $('#active').click(function () {
                // layer.msg("hello")
                layer.open({
                    type: 1
                    , title: '单选框'
                    , area: ['100%', '100%']
                    , content: $('#select')
                    , skin: 'layui-layer-molv'
                    , offset: 'auto'
                    , icon: false
                    , btn: ['确认', '关闭']
                    , yes: function (index, layero) {
                        layer.close(index)
                    }, btn2: function (index, layero) {
                    }
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , shade: 0.1
                    , time: 0
                    , id: ''
                    , anim: 1
                    , cancel: function (index, layero) {
                        layer.msg("关闭")
                    }
                    , success: function (layero, index) {

                    }
                    , end: function () {
                        setTimeout(function () {
                            layer.msg("销毁")
                        }, 2000)
                    }
                })
            });
            $('#price').click(function () {
                // layer.msg("hello")
                layer.open({
                    type: 1
                    , title: '单选框'
                    , area: ['100%', '100%']
                    , content: $('#page_two')
                    , skin: 'layui-layer-molv'
                    , offset: 'auto'
                    , icon: false
                    , btn: ['确认', '关闭']
                    , yes: function (index, layero) {
                        layer.close(index)
                    }, btn2: function (index, layero) {
                    }
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , shade: 0.1
                    , time: 0
                    , id: ''
                    , anim: 1
                    , cancel: function (index, layero) {
                        layer.msg("关闭")
                    }
                    , success: function (layero, index) {

                    }
                    , end: function () {
                        setTimeout(function () {
                            layer.msg("销毁")
                        }, 2000)
                    }
                })
            })

            $('#maxdata').click(function () {
                // layer.msg("hello")
                layer.open({
                    type: 1
                    , title: '单选框'
                    , area: ['100%', '100%']
                    , content: $('#addtable')
                    , skin: 'layui-layer-molv'
                    , offset: 'auto'
                    , icon: false
                    , btn: ['确认', '关闭']
                    , yes: function (index, layero) {

                    }, btn2: function (index, layero) {
                    }
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , shade: 0.1
                    , time: 0
                    , id: ''
                    , anim: 1
                    , cancel: function (index, layero) {
                        layer.msg("关闭")
                    }
                    , success: function (layero, index) {

                    }
                    , end: function () {
                        setTimeout(function () {
                            layer.msg("销毁")
                        }, 2000)
                    }
                })
            })
            // $('#maxdata').click(function () {
            //     window.location.href = '../index.html'
            //     window.sessionStorage.steItem('token', 'value')
            // })
            table.render({
                elem: '#demo'
                , title: '用户数据表'
                , url: '../user.json' //数据接口
                , page: true
                , height: 500
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true }
                    , { field: 'username', title: '用户名', width: 120, edit: 'text' }
                    , {
                        field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                            return '<em>' + res.email + '</em>'
                        }
                    }
                    , { field: 'sex', title: '性别', width: 80, edit: 'text', sort: true }
                    , { field: 'city', title: '城市', width: 100 }
                    , { field: 'sign', title: '签名' }
                    , { field: 'experience', title: '积分', width: 80, sort: true }
                    , { field: 'ip', title: 'IP', width: 120 }
                    , { field: 'logins', title: '登入次数', width: 100, sort: true }
                    , { field: 'joinTime', title: '加入时间', width: 120 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , initSort: {
                    field: 'id',
                    type: 'desc'
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.item //解析数据列表
                    };
                }
                , request: {
                    PageName: 'page',
                    limitName: 'limit'
                }
                , done: function (res, curr, count) {
                    console.log(res);
                    var Resdata = res.data
                    console.log(Resdata)
                }
                , defaultToolbar: ['filter', 'print', 'exports', {
                    title: '提示' //标题
                    , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-tips' //图标类名
                }]
                , text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
                , skin: ''//行边框风格
                , even: 'true'//开启隔行背景
                , size: 'sm'//小尺寸的表格
                , id: 'idTest'
            });

            table.render({
                elem: '#Apanel'
                , id: 'Apanel'
                , title: '用户数据表'
                , url: '../user.json' //数据接口
                , page: true
                , height: 500
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true }
                    , { field: 'username', title: '用户名', width: 120, edit: 'text' }
                    , {
                        field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                            return '<em>' + res.email + '</em>'
                        }
                    }
                    , { field: 'sex', title: '性别', width: 80, edit: 'text', sort: true }
                    , { field: 'city', title: '城市', width: 100 }
                    , { field: 'sign', title: '签名' }
                    , { field: 'experience', title: '积分', width: 80, sort: true }
                    , { field: 'ip', title: 'IP', width: 120 }
                    , { field: 'logins', title: '登入次数', width: 100, sort: true }
                    , { field: 'joinTime', title: '加入时间', width: 120 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]

            });
        });
    </script>
</body>
<div id="addtable" style="display: none;">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">用户</li>
            <li>住户</li>
            <li>业主</li>
            <li>缴费</li>
            <li>欠费</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">业主姓名</h2>
                        <div class="layui-colla-content">
                            <table id="demo" lay-filter="test"></table>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">性别</h2>
                        <div class="layui-colla-content">
                            <table id="Apanel" lay-filter="Apanel"></table>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">职业</h2>
                        <div class="layui-colla-content">住房信息</div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-md5">
                        <div class="layui-row grid-demo layui-bg-green">
                            <div class="layui-col-md3">
                                住房编号
                            </div>
                            <div class="layui-col-md9">
                                物业费
                            </div>
                            <div class="layui-col-md12">
                                联系电话
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md7">
                        <div class="layui-row grid-demo grid-demo-bg1 layui-bg-green">
                            <div class="layui-col-md12">
                                入住时间
                            </div>
                            <div class="layui-col-md9">
                                服务项目
                            </div>
                            <div class="layui-col-md3">
                                收费标准
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-anim layui-anim-up">业主服务信息</div>
                <div class="layui-anim layui-anim-up layui-anim-loop">缴费表单</div>
            </div>
            <div class="layui-tab-item">
                <div style="max-width: 1140px;">
                    <ul class="layui-border-box site-doc-icon site-doc-anim">
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-down">起始日期</div>
                            <div class="code">layui-anim-down</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-downbit">终止日期</div>
                            <div class="code">layui-anim-downbit</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-up">物业费总额</div>
                            <div class="code">layui-anim-up</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-upbit">停车费总额</div>
                            <div class="code">layui-anim-upbit</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-scale">停车费总额</div>
                            <div class="code">layui-anim-scale</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-scaleSpring">水费总额</div>
                            <div class="code">layui-anim-scaleSpring</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-scalesmall">电费总额</div>
                            <div class="code">layui-anim-scalesmall</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">煤气费总额</div>
                            <div class="code">layui-anim-scalesmall-spring</div>
                        </li>


                        <li>
                            <div class="layui-anim" data-anim="layui-anim-fadein">服务费总额</div>
                            <div class="code">layui-anim-fadein</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-fadeout">欠费业主姓</div>
                            <div class="code">layui-anim-fadeout</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-rotate">欠费金额</div>
                            <div class="code">layui-anim-rotate</div>
                        </li>
                        <li>
                            <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
                            <div class="code">终止日期</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-tab-item">起始日期</div>
        </div>
    </div>
</div>
<form action="" class="layui-form" id="select" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证手机</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">多规则验证</label>
            <div class="layui-input-inline">
                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证日期</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证链接</label>
            <div class="layui-input-inline">
                <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">验证身份证</label>
        <div class="layui-input-block">
            <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off"
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">自定义验证</label>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
                class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</form>
<script type="text/html" id="toolbarDemo">

</script>

</html>